<template>
	<view style="position: relative;">
		<view class="tab">
			<headerNav :navData="navData" @click="tab" />
		</view>
		<view class="center">

			<xbd-page-card>
				<template>
					<xbd-image-title title="正在进行" :image="require('@/static/image/supervision/proceed.png')">
					</xbd-image-title>
					<xbd-project-report-card :myInfo="item" v-for="(item,index) in waitList" :key="index">
					</xbd-project-report-card>
					<xbd-null-list v-if="!waitList.length"></xbd-null-list>
				</template>
			</xbd-page-card>

			<xbd-page-card>
				<template>
					<xbd-image-title title="已完成" :image="require('@/static/image/supervision/end.png')">
						<template>
							<view class="box-right">
								<xbd-date-pick fields="day" :date="date" :visible.sync="visible"
									@setDate="setDate">
									<template>
										<view class="date" @click="visible = true">
											<text>{{ date }}</text>
											<image class="date-img" src="@/static/image/down.svg"></image>
										</view>
									</template>
								</xbd-date-pick>
							</view>
						</template>
					</xbd-image-title>

					<view class="conditions">
						<view class="search">
							<uni-easyinput class="uni-mt-5" placeholderStyle=" font-size:32rpx; color:#A0A7B8;"
								suffixIcon="search" v-model="endInfo.keyword" placeholder="搜索内容" @iconClick="iconClick">
							</uni-easyinput>
						</view>
					</view>
					<uni-list :border="false">
						<xbd-project-report-card :myInfo="item" v-for="(item,index) in showList" :key="index">
						</xbd-project-report-card>
						<xbd-null-list v-if="!showList.length"></xbd-null-list>
						<xbd-loading-more v-if="showList.length" :status-num="statusNum" :is-load-more="isLoadMore">
						</xbd-loading-more>
					</uni-list>
				</template>
			</xbd-page-card>

		</view>
	</view>
</template>

<script>
	import {
		Prevention
	} from '@/api/index.js';
	import headerNav from "@/components/nav/nav.vue";
	const dayjs = require("dayjs");
	export default {
		data() {
			const nowDate = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
			return {
				tabs: 0,
				navData: [{
					title: "三重一大",
					id: 'policy'
				}, {
					title: "招投标",
					id: 'bid'
				}, {
					title: "物资采购",
					id: 'goods'
				}],
				visible: false,
				date: '日期选择',
				statusNum: 0,
				isLoadMore: false,
				nowDate: nowDate,
				value: '',
				showList: [],
				waitList: [],
				show: false,
				info: {
					page: 1,
					tab: 'policy',
					perpage: 10000,
					type: 'ing',
				},
				endInfo: {
					page: 1,
					perpage: 10,
					type: 'end',
					tab: 'policy',
					department: '',
					time: '',
					keyword: ''

				}
			};
		},
		components: {
			headerNav,
		},
		methods: {
			tab(i, id, val) {
				this.tabs = i
				// console.log(i,'qie')
				this.endInfo.tab = id
				this.info.tab = id
				this.endInfo.page = 1;
				uni.pageScrollTo({
					scrollTop: 0,
				});
				this.getWaitList()
				this.getEndList()
			},
			// 加载更多
			loadmore() {
				this.endInfo.page++;
				this.statusNum = 1;
				this.isLoadMore = true;
				this.loadmoreList();
			},
			async loadmoreList() {
				try {
					const res = await Prevention.getProjectAuditList(this.endInfo)
					if (res.data.list.length) {
						this.showList = this.showList.concat(res.data.list);
						if (res.data.list.length === this.endInfo.perpage) {
							this.statusNum = 2;
						} else {
							this.statusNum = 0;
						}
						// this.isLoadMore = false;
					} else {
						this.endInfo.page--;
						this.statusNum = 0;
					}
				} catch (e) {
					uni.hideLoading();
					this.endInfo.page--;
				}
			},
			iconClick() {
				this.endInfo.page = 1
				this.showList = []
				this.statusNum= 0,
				this.getEndList()
			},
			async setDate(date) {
				this.date = date;
				console.log('确定')
				console.log(this.endInfo)
				this.endInfo.page = 1
				this.endInfo.time = date
				this.statusNum= 0,
				this.showList = []
				await this.getEndList()
			},

			clickDetail(val) {
				uni.navigateTo({
					url: `/pages/supervision/reportUpload/detail?id=${val}`,
				});

			},
			async getWaitList() {

				const res = await Prevention.getProjectAuditList(this.info)
				this.waitList = res.data.list
				console.log(res, 'res1')
				console.log(this.nowDate)
			},
			async getEndList() {
				
				const res = await Prevention.getProjectAuditList(this.endInfo)
				if (res.data.list.length === this.endInfo.perpage) {
					this.isLoadMore = true;
					this.statusNum = 2;
				}
				this.showList = res.data.list
				console.log(res, 'res2')
			},
		},
		async onShow() {
			this.endInfo.page = 1;
			uni.pageScrollTo({
				scrollTop: 0,
			});
			await this.getWaitList()
			await this.getEndList()
		},
		// 触底触发
		onReachBottom() {
			// 当下拉组件显示状态 并且显示不是没有数据了 时才进行下拉加载
			if (this.isLoadMore && this.statusNum !== 0) {
				this.loadmore();
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-icons {
		margin-right: 20rpx;
	}

	::v-deep .uni-easyinput__content-input {
		font-size: 30rpx;
	}

	::v-deep .uni-easyinput__content {
		height: 72rpx !important;
	}

	.tab {
		width: 750rpx;
		padding-top: 30rpx;
		background-color: #FFFFFF;
		// position: fixed;
		position: fixed;
		top: 0;
		z-index: 999;

	}

	.center {
		padding: 32rpx;
		box-sizing: border-box;
		margin-top: 100rpx;


		.conditions {
			width: 100%;
			background-color: #FFFFFF;
			display: flex;
			margin-bottom: 20rpx;
			height: 72rpx;
			// box-sizing: border-box;
			padding: 10rpx 0 20rpx;
		}

		// background-color: #fff;
		.search {
			height: 70rpx;
			width: 100%;
		}
	}

	.date {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 220rpx;
		height: 56rpx;
		border: 2rpx solid #A0A7B8;
		border-radius: 30rpx;
		font-size: 28rpx;
		padding: 0 16rpx;
		box-sizing: border-box;
		color: #999;

		.date-img {
			width: 34rpx !important;
			height: 34rpx !important;
			margin: 0 !important;
			transform: rotate(90deg)
		}
	}
</style>
